<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="p1"><li>name</li>
        <li></li></ul>
    
</body>
</html>
<script>
    var arr = [
  {
    name: 'Jack',
    age: 18,
    gender: '男'
  },{
    name: 'Rose',
    age: 20,
    gender: '女'
  },{
    name: 'Tom',
    age: 22,
    gender: '男'
  },
  {
    name: 'tony',
    age: 24,
    gender: '男'
  },
  {
    name: 'mark',
    age: 27,
    gender: '男'
  }
];
var num = document.querySelector('#p1')
// var repeat = arr.map(function(item){
//     return `<li>
//         <span>name:</span>
//         <span>${item.name}</span>
//         </li>`
// }).join('')
// num.innerHTML = repeat
// console.log(repeat);
var rpt = arr.map(function(item){
  return `<li>
            <span>name:</span>
            <span>${item.gender}</span>
          </li>`
}).join()
console.log(rpt);
num.innerHTML = rpt
</script>